@import "../common/vars.scss";
@import "../mixins/mixins.scss";
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,input,button,textarea,p,blockquote,th,td,form,pre{margin: 0; padding: 0; }
a{text-decoration:none; }
.auto-float{
    float: right;
    text-align: right;
    @media (max-width: 767px){
        float: left;
        text-align: left;
    }
}
.clearfix{
    zoom:1;
    &:after{
        content: "";
        clear: both;
        display:block;
        width:0;
        height:0;
        visibility:hidden;
    }
}
.margin-r-auto{
    margin-right: auto !important;
}
//主界面
@include create(wrapper){
    position: relative;
    width: 100%;
    overflow: hidden;
    & .aiui-icon-menufold{
        transition: transform .3s;
    }
    @include when(collapsed){
        & .aiui-icon-menufold{
            transform: rotate(180deg);
        }

        & .aiui-nav-header{
            width: $sidebar-mini-width;
            .logo{
                width: $sidebar-mini-width;
            }
            .logo-small{
                display: block
            }
            .logo-large{
                display: none
            }
        }
        & .aiui-nav-body{
            margin-left: $sidebar-mini-width;
        }

        & .aiui-sidebar{
            width: $sidebar-mini-width;
            .aiui-sidebar-inner{
                width: $sidebar-mini-width+20;
            }
        }

        & .aiui-body{
            margin-left:$sidebar-mini-width;
        }
    }
}
.aiui-nav-header,
.aiui-nav-body,
.aiui-sidebar,
.aiui-body,
.logo-small,
.logo-large,
.aiui-sidebar-inner{
    transition: display .3s,left .3s,width .3s,margin .3s,font-size .3s;
}
//顶部菜单
@include create(nav){
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1030;
    display: flex;
    align-items: stretch;
    box-shadow: $box-shadow-light;
    height:$nav-height;
    @include m(header){
        position: fixed;
        width: $sidebar-width;
        height:$nav-height;
        z-index: 1030;
        background: $color-primary;
        //logo
        & .logo{
            display: block;
            float: left;
            height:$nav-height;
            font-size: 20px;
            line-height:$nav-height;
            text-align:center;
            width:$sidebar-width;
            font-weight: 300;
            overflow: hidden;
            color: #fff;
            text-decoration: none;
            //小logo
            .logo-small{
                display: none;
            }
            //大logo
            .logo-large{
                display: block;
            }
        }
    }
    @include m(body){
        display: flex;
        flex: 1;
        background-color:$color-white;
        overflow: hidden;
        margin-left:$sidebar-width;
        padding-right:15px;
    }
    @include m(menu){
        list-style: none;
        margin: 0;
        padding-left: 0;
        @include m(item){
            height: $nav-height;
            line-height: $nav-height;
            float: left;
            @include m(title){
                color:$color-text-regular;
                display: block;
                padding: 0 20px;
                transition: border-color .3s,background-color .3s,color .3s;
                &:hover{
                    color: $color-primary;
                    background: $color-primary-light-9;
                }
                @include when(active){
                    color: $color-primary;
                    background: $color-primary-light-9;
                }
            }
        }
    }
}
//左侧导航
@include create(sidebar){
    position: fixed;
    top: $nav-height;
    left: 0;
    bottom: 0;
    z-index: 1020;
    width:$sidebar-width;
    background-color: $color-white;
    box-shadow: $box-shadow-dark;
    overflow: hidden;
    @include m(inner){
        position: relative;
        z-index: 1;
        width:$sidebar-width+20;
        height: 100%;
        padding-bottom: 15px;
        overflow-x: hidden;
        overflow-y: scroll;
        & .aiui-sidebar-menu:not(.aiui-menu-collapse){
            width: $sidebar-width;
        }
    }
    //黑色主题
    @include m(dark){
        background-color: $sidebar-dark-background;
        @include create(menu){
            background-color: $sidebar-dark-background;
        }
        @include create(submenu){
            @include e(title){
                color: $sidebar-dark-color;
                &:hover{
                    color: $sidebar-menu-item-hove-color;
                    background: $sidebar-menu-item-hove-background;
                }
            }
            @include when(active){
                @include e(title){
                    color: #e8eaec;
                }
            }
            @include when(open){
                background-color: $sidebar-dark-open-background;
            }
            @include create(menu){
                background: $sidebar-dark-open-background;
            }
        }
        @include create(menu-item){
            @include e(title){
                color: $sidebar-dark-color;
                &:hover{
                    color: $sidebar-menu-item-hove-color;
                    background: $sidebar-menu-item-hove-background;
                }
            }
            @include when(active){
                @include e(title){
                    color: #e8eaec;
                }
            }
        }
    }
}
//主体部分
@include create(body){
    margin-left: $sidebar-width;
    padding-top: $nav-height;
    z-index: 998;
    width: auto;
    overflow: hidden;
    box-sizing: border-box;
    background: $background-color-base;
    min-height: calc(100vh);
    //body导航部分
    @include create(breadcrumb){
        background: $color-white;
        height: $breadcrumb-height;
        line-height: $breadcrumb-height;
        padding: 0 15px;
        box-shadow: $box-shadow-light-half;
    }
    //内容展示
    @include create(content){
        padding: 15px;
        //工具条
        @include create(table-toolbar){
            padding: 15px;
        }
    }
}
//手机端样式
@media (max-width: 767px){
    @include create(body){
        margin-left: 0px;
    }
    @include create(nav){
        @include m(body){
            margin-left: 0px;
        }
        @include m(header){
            transform: translate(-$sidebar-width, 0);
        }
    }
    @include create(sidebar){
        transform: translate(-$sidebar-width, 0);
    }
    @include create(wrapper){
        @include when(open){
            & .aiui-body{
                transform: translate($sidebar-width, 0);
            }
            & .aiui-nav-body{
                transform: translate($sidebar-width, 0);
            }
            & .aiui-nav-header{
                transform: translate(0, 0);
            }
            & .aiui-sidebar{
                transform: translate(0, 0);
            }
        }
    }
    .aiui-body,
    .aiui-nav-header,
    .aiui-nav-body,
    .aiui-sidebar{
        transition: transform .3s ease-in-out,width .3s ease-in-out;
    }
}